<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">

      <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择" clearable
                   >
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教师号：" prop="id">
        <el-input v-model="form.id"  placeholder="请输入教师号"></el-input>
      </el-form-item>

      <el-form-item label="学校：" prop="college">
        <el-select v-model="form.school" filterable placeholder="选择学校" @focus="handleGetAllSchool"
          @change="handleChangeSchool" style="width: 240px">
          <el-option v-for="(school, index) in schoolList" :key="index" :label="school" :value="school" />
        </el-select>
      </el-form-item>

      <el-form-item label="学院：" prop="college">
        <el-select v-model="form.college" filterable placeholder="选择学院" @focus="handleGetCollege"
          @change="handleChangeCollege" :disabled="!isSchoolSelected" style="width: 240px">
          <el-option v-for="(college, index) in collegeList" :key="index" :label="college" :value="college" />
        </el-select>
      </el-form-item>


    </el-form>
  </Layer>
</template>

<script lang="ts">
import {defineComponent, ref, computed} from 'vue'
import Layer from '@/components/layer/index.vue'
import {addTeacherAccountApi} from '@/api/accountManagement';
import {ElMessage} from "element-plus";
import type { LayerType } from '@/components/layer/index.vue'
import type { Ref } from 'vue'
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import { getAllSchoolApi, getCollegeBySchoolApi, getMajorByCollegeApi } from "@/api/user"

import {  updateTeacherAccountsApi} from "@/api/accountManagement";
export default defineComponent({

  components: {
    Layer
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true
        }
      }
    }
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext|null> = ref(null)
    const layerDom: Ref<LayerType|null> = ref(null)
    let form = ref({
      name: null,
      gender: null,
      id: null,
      college: null,
      school: null,
    })
    const rules = {
      name: [{required: false, message: '请输入姓名', trigger: 'blur'}],
      gender: [{required: false, message: '选择性别', trigger: 'blur'}],
      id: [{required: true, message: '请输入工号', trigger: 'blur'}],
      school: [{required: false, message: '请选择学校', trigger: 'blur'}],
      college: [{required: false, message: '请选择学院', trigger: 'blur'}],

    }
    const schoolList = ref([])
    const collegeList = ref([])
    const majorList = ref([])
    const isSchoolSelected = computed(() => {
      return form.value.school !== '';
    });

    const isCollegeSelected = computed(() => {
      return isSchoolSelected.value && form.value.college !== '';
    });
    const handleGetAllSchool = () => {
      getAllSchoolApi().then((response: any) => {
        schoolList.value = response.data;
      })
    }
    const handleGetCollege = () => {
      getCollegeBySchoolApi(form.value).then((response: any) => {
        collegeList.value = response.data;
      })
    }
    const handleGetMajor = () => {
      getMajorByCollegeApi(form.value).then((response: any) => {
        majorList.value = response.data;
      })
    }
    const handleChangeSchool = () => {
      form.value.college = '';
    };
    const handleChangeCollege = () => {
    };
    init()
    function init() { // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
      } else {

      }
    }
    return {
      form,
      rules,
      ruleForm,
      layerDom,
      
      isSchoolSelected,
      isCollegeSelected,
      handleChangeSchool,
      handleChangeCollege,
      handleGetCollege,
      handleGetMajor,
      handleGetAllSchool,
      schoolList,
      collegeList,
      majorList,
    }
  },
  methods: {
    submit() {
      if (this.ruleForm) {
        this.ruleForm.validate((valid:any) => {
          if (valid) {
            let params = this.form
            if (this.layer.row) {
              this.updateForm(params)
            } else {
              this.addForm(params)
            }
          } else {
            return false;
          }
        });
      }
    },
    // 新增提交事件
    addForm(params: object) {
      addTeacherAccountApi(params).then((res:any) => {
        this.layer.show = false
        if (res.code === 200) {

          this.$emit('getTableData', true)
          ElMessage.success('添加成功')
        } else {
          ElMessage.error(res.msg)
        }
      }).catch(error => {
        ElMessage.error(error)

      })
    },
    // 编辑提交事件
    updateForm(params: object) {
      updateTeacherAccountsApi([params])
      .then((res: any) => {
          if (res.code === 200) {
            ElMessage.success({ message: "修改成功", duration: 3000 })
            this.$emit('getTableData', false)
            this.layer.show = false
          } else {
            ElMessage.error({ message: "修改信息出错", duration: 3000 })
          }
        })
    },
    
  }
})
</script>

<style lang="scss" scoped>

</style>